<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雇主的页面列表</title>

    <!--引入Vue组件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <!--引入Axios组件，用来发送异步http请求的-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!-- 把json 数据转成form方式提交数据  后端方便获取数据 -->
    <script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>

</head>
<body>

<div id="app">

    <el-table
            :data="stus"
            border
            style="width: 100%">

        <el-table-column
                label="编号"
                prop="id"
                width="180">
        </el-table-column>
        <el-table-column
                label="姓名"
                prop="name"
                width="180">
        </el-table-column>
        <el-table-column
                label="年龄"
                prop="age"
                width="180">
        </el-table-column>

        <el-table-column label="操作">

            <!-- 自定义的区域 插槽-->
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">
                    编辑
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>


</div>

<script>
    new Vue({
        el:"#app",
        data:{
            stus:[],

        },
        methods:{
            //请求数据
            getData(){
                axios.get("/stu/query").then(resp=>{
                    this.stus = resp.data;
                })
            }
        },
        // vue 创建 会执行的方法
        created(){
            console.log("我初始化了...这里进行网页数据初始化")
            this.getData();
        }
    })
</script>

</body>
</html>